<script setup>
import { uniFetch } from '../../api/uni-fetch';
import { ref } from 'vue';
import { onShow, onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { useUserStore } from "/store/user.js"

onShareAppMessage(() => {
	const openid = uni.getStorageSync("userLoginCode").openid || uni.getStorageSync("userLoginCode").user.openid
	return {
		title: '华靓甄选-会员充值',
		path: '/pages/MemberRecharge/MemberRecharge?invite_token=' + openid
	}
})

function goMember() {
	uni.navigateTo({
		url: "/subpkg/MemberEquity/MemberEquity"
	})
}

// 在MemberRecharge.vue的onLoad中添加
onLoad(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  if(currentPage) {
    currentPage.onBackPress = () => {
      const prevPage = pages[pages.length - 2];
      if(prevPage && prevPage.route === 'pages/mine/mine') {
        prevPage.onShow && prevPage.onShow();
      }
      return false;
    };
  }
})

const totalAmount = ref('--')
const store = useUserStore()

onShow(async () => {
	if (store.token == '') {
	store.curretPage = `pages/MemberRecharge/MemberRecharge`
		uni.switchTab({ url: '/pages/mine/mine' })
		return uni.showToast({
			title: '请您授权登录',
			icon: 'none'
		})
	}

	const { data } = await uniFetch.post('/user/info')
	console.log(data, '个人资料info');
	totalAmount.value = data.user.dmg_money.toFixed(2)
})

const rechargeList = ref([
	{ m: 9.9, c: false, n: 0 },
	{ m: 100, c: false, n: 10  },
	{ m: 200, c: false, n: 30 },
	{ m: 300, c: false, n: 50 },
	{ m: 500, c: false, n: 100 }
])

function forRecharge() {
	if (money.value === 0) {
		return uni.showToast({
			title: '请选择充值金额',
			icon: 'none'
		})
	}

	uni.showModal({
		title: '充值',
		content: `确认充值${money.value}元？`,
		success: async (success) => {
			console.log(success);
			if (success.confirm) {
				const pres = await uniFetch.post('/dmg/recharge', { amount: money.value })
				console.log(pres);
				if (pres.code === 10000) {
					wx.requestPayment({
						timeStamp: String(pres.data.timestamp),
						nonceStr: pres.data.nonceStr,
						package: pres.data.package,
						"signType": "MD5",
						paySign: pres.data.paySign,
						success: async (res) => {
							const { data } = await uniFetch.post('/user/info')
							totalAmount.value = data.user.dmg_money.toFixed(2)
							uni.showToast({
								title: '充值成功',
								icon: 'none',
								duration: 1500,
							})
						}
					})
				}
			}
		},
	})
}

const money = ref(0)
function payFor(m, i) {
	money.value = m
	rechargeList.value.forEach((item, index) => {
		if (index === i) {
			item.c = true
		} else {
			item.c = false
		}
	})
}

// const rechargeRate = ref(null)
// async function getDzBl() {
// 	const res = await uniFetch.post('/user/app-config', {
// 		appId: uni.appId
// 	})
// 	rechargeRate.value = Number(res.data.rechargeRate)
// }
// getDzBl()
</script>

<template>
	<view class="member-recharge">
		<view class="account-balance">
			<view class="balance">
				账户余额：<text>{{ totalAmount }}</text>元
			</view>
		</view>

		<!-- <view class="tipss">此充值仅可在售货机使用，充值获取会员，商城购买享受会员价，最高8折优惠。</view> -->
		<view class="tipss">充值获取会员，商城购买享受会员价。</view>


		<!-- 会员等级 -->
		<!-- <view class="member-level">
			<view class="level-title">
				<view class="level">
					等级 ：<text>钻石会员</text>
				</view>

				<view class="equity" @click="goMember">
					会员权益 >>
				</view>
			</view>

			<view class="level-line">
				<view class="level-now">
					2124 积分
				</view>
				<view class="level-now">
					<text>下一等级:</text> 黑卡会员
				</view>
			</view>

			<view class="line">
				<u-line-progress height="12" :showText="false" :percentage="65" activeColor="#b99056"></u-line-progress>
			</view>

			<view class="level-line">
				距离黑卡会员还有9999积分
			</view>
		</view> -->

		<!-- 会员充值 -->
		<view class="recharge-feature">
			<title>充值金额</title>

			<view class="area">

				<view class="title-item" :class="{ active: item.c }" v-for="(item, index) in rechargeList" :key="item"
					@click="payFor(item.m, index)">
					<view style="display: flex; justify-content: center; align-self: center; flex-direction: column; width: 100%; height: 100%;">
						<view>
							<text style="font-size: 40rpx;">{{ item.m }}</text>
							<text style="font-size: 30rpx;">元</text>
						</view>
						<view v-show="item.n" style="font-size: 27rpx;">
							<text style="margin-right: 10rpx;">立赠</text>
							<text>{{ item.n }}</text>
						</view>
					</view>
				</view>
				<!-- <view class="title-item">
					<input type="text" placeholder="输入金额" placeholder-style="color:#c1bbc1" />
				</view> -->

			</view>

			<view class="button" @click="forRecharge">
				充值
			</view>

		</view>
	</view>
</template>

<style lang="scss" scoped>
.tipss{
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #555;
}
.member-recharge {
	padding: 18rpx;
	background-color: #f6f8fc;
	height: 100vh;


	.account-balance {
		padding: 0 20rpx;
		height: 120rpx;
		border-radius: 15rpx;
		line-height: 120rpx;
		color: #010101;
		background-color: $custom-theme-color-4;

		.balance {
			float: left;
			font-size: 32rpx;

			text {
				color: $custom-theme-red;
				font-size: 38rpx
			}
		}

		.tips {
			font-size: 28rpx;
			float: right;
			color: #555;
		}

	}

	.member-level {
		margin-top: 20rpx;
		padding: 15rpx 25rpx;
		border-radius: 15rpx;
		height: 250rpx;
		background-color: #494a4b;
		color: #fefefe;

		.level-title {
			margin-top: 10rpx;
			margin-bottom: 45rpx;
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;

			.level {
				float: left;
				font-size: 36rpx
			}

			.equity {
				color: #ce9e57;
				float: right;
			}
		}

		.level-line {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;

			text {
				font-size: 23rpx
			}
		}

		.line {
			margin: 25rpx 0;
			height: 12rpx;
			width: 100%;
		}
	}

	.recharge-feature {
		// padding: 35rpx 0;

		title {
			font-size: 35rpx;
			line-height: 90rpx;
		}

		.area {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 30rpx;
			width: 100%;
			box-sizing: border-box;
			.title-item {
				margin-bottom: 30rpx;
				width: 32%;
				margin-right: 2%;
				height: 120rpx;
				border-radius: 10rpx;
				background-color: #fefefe;
				box-sizing: border-box;
				color: #c1bbc1;
				border: 1px solid #c1bbc1;
				text-align: center;
				input {
					margin-top: 40rpx;
				}
			}
			.title-item:nth-child(3n) {
				margin-right: 0;
			}

			.active {
				border: 1px solid #e3951f;
				color: #e3951f;
			}
		}

	}

	.button {
		margin: 45rpx auto 0;
		color: #fefefe;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 38rpx;
		font-size: 32rpx;
		text-align: center;
		width: 460rpx;
		background: generate-gradient($custom-theme-color, #ff9500);
	}
}
</style>